<!--
  时间弹出框组件              zls-2022/06/04
      Attributes
          1、input公共组件的部分属性
          其他所有属性均参考vant组件库中的  "DatetimePicker 时间选择"

      Events
          1、confirm        弹出框的确认按钮

      Demo==>
          请参考 Form 表单组件
-->

<template>
  <div class="z-time">
    <z-input
      :label="$attrs.label"
      :modelValue="inputValue"
      :labelWidth="$attrs['labelWidth']"
      :placeholder="$attrs.placeholder || '请选择'"
      :svg="$attrs.svg || 'jiantou'"
      readonly
      clickable
      @click="show = true"
      @input="input"
    ></z-input>
    <Popup
      v-model:show="show"
      :overlay="$attrs['overlay']"
      :position="$attrs['position'] || 'bottom'"
      :lock-scroll="$attrs['lock-scroll']"
      :close-on-click-overlay="$attrs['close-on-click-overlay']"
      :closeable="$attrs['closeable']"
      :close-icon="$attrs['close-icon']"
      :close-icon-position="$attrs['close-icon-position']"
      :safe-area-inset-bottom="true"
      round
      close-on-popstate
      @click-overlay="show = false"
      @click-close-icon="show = false"
    >
      <DatetimePicker
        v-model="currentDate"
        :type="$attrs['type'] || 'date'"
        :title="$attrs['title'] || '时间选择'"
        :show-toolbar="$attrs['show-toolbar']"
        :loading="$attrs['loading']"
        :readonly="$attrs['readonly']"
        :filter="$attrs['filter']"
        :formatter="$attrs['formatter']"
        :columns-order="$attrs['columns-order']"
        :min-date="$attrs['min-date']"
        :max-date="$attrs['max-date'] || maxDate"
        :min-hour="$attrs['min-hour']"
        :max-hour="$attrs['max-hour']"
        :min-minute="$attrs['min-minute']"
        :max-minute="$attrs['max-minute']"
        @confirm="confirm"
        @cancel="show = false"
      />
    </Popup>
  </div>
</template>

<script>
export default { name: 'z-time' }
</script>
<script setup>
import { ref, useAttrs, inject, getCurrentInstance, watch } from 'vue'
import { Popup, DatetimePicker } from 'vant'
import $day from 'dayjs'
const attrs = useAttrs()
const global = getCurrentInstance().appContext.config.globalProperties
const formItem = inject('formItem')
const emit = defineEmits(['confirm', 'update:modelValue'])

const show = ref(false) // 是否弹出
// const maxDate = ref(new Date($day().add(100, 'year'))) // 最大时间为100年后
const maxDate = ref(new Date()) // 最大时间为今天
const currentDate = ref('') // 当前时间(时间插件使用)
const inputValue = ref('') // 当前时间(input框使用)

// 格式化时间
const formatTimeObj = {
  time: 'HH:mm',
  'month-day': 'MM-DD',
  'year-month': 'YYYY-MM',
  date: 'YYYY-MM-DD',
  datehour: 'YYYY-MM-DD HH',
  datetime: 'YYYY-MM-DD HH:mm'
}
currentDate.value = attrs.type === 'time' ? attrs.modelValue : new Date(attrs.modelValue || $day()) // 初始化当前时间

watch(
  () => attrs.modelValue,
  newVal => {
    inputValue.value = attrs.type === 'time' ? newVal : newVal ? $day(newVal).format(formatTimeObj[attrs.type]) : ''
    emit('update:modelValue', inputValue.value)
  },
  { immediate: true }
)

// 实时改变
function input() {
  show.value = false
  emit('confirm', '')
  global.$bus.emit('formItem-change', formItem.value.prop || 'noProp')
}

// 选中某一项后，点击确认按钮 { value: 前选中的时间 }
function confirm(value) {
  show.value = false
  const time = attrs.type === 'time' ? value : $day(value).format(formatTimeObj[attrs.type])
  emit('confirm', time)
  global.$bus.emit('formItem-change', formItem.value.prop || 'noProp')
}
</script>
